<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>

<body>
	<!-- banner区 -->
	<section id="banner">
		<div class="swiper">
			<!-- 轮播图通常情况应该在div里面放image标签 -->
			<!-- 由于这里的banner图尺寸不一,用image标签会导致图片失真 -->
			<div class="swiper-wrapper">
				<div class="swiper-slide swiper1"></div>
				<div class="swiper-slide swiper2"></div>
				<div class="swiper-slide swiper3"></div>
			</div>
			<!--分页器。-->
			<div class="swiper-pagination"></div>
		</div>
	</section>
	<!-- 主体区域 -->
	<section class="mainmenu">
		<div class="menu container">
			<div class="ranking">
				<p>今日排名</p>
				<h1 id="rankingNum"></h1>
			</div>
			<div class="checkin">
				<p>累积打卡<span id="clockIndays"></span>天</p>
				<div id="clockIn">今日打卡</div>
			</div>
			<div class="data">
				<p>运动数据</p>
			</div>
			<div class="badge">
				<p>累积运动徽章</p>
				<div class="figure">
					<span id="badgeNum"></span>
					<span>枚</span>
				</div>
			</div>
			<div class="course">
				<p>课程训练</p>
			</div>
			<div class="jogging">
				<p>户外跑步</p>
			</div>
		</div>
	</section>
	<nav>
		<div class="active">
			<span class="iconfont icon-shouye"></span>
			<a href="index.html">首页</a>
		</div>
		<div>
			<span class="iconfont icon-xintiao"></span>
			<a href="exercising_run.html">运动</a>
		</div>
		<div>
			<span class="iconfont icon-circle"></span>
			<a href="circle.html">圈子</a>
		</div>
		<div>
			<span class="iconfont icon-wode"></span>
			<a href="mine.html">我的</a>
		</div>
	</nav>
</body>

</html>